<template>
  <div>
    <nav-bar></nav-bar>

    <div class="container">
      <div class="image-upload">
        <div class="upload-form">
          <h2 class="upload-title">上传壁纸</h2>
          <div class="form-group">
            <label for="wallpaper-id">Wallpaper ID</label>
            <input id="wallpaper-id" type="text" v-model="wallpaperData.wallpaperId" required>
          </div>
          <div class="form-group">
            <label for="w-url">URL</label>
            <input id="w-url" type="text" v-model="wallpaperData.wUrl" required>
          </div>
          <div class="form-group">
            <label for="w-thumbnails">Thumbnails</label>
            <input id="w-thumbnails" type="text" v-model="wallpaperData.wThumbnails" required>
          </div>
          <div class="form-group">
            <label for="w-title">Title</label>
            <input id="w-title" type="text" v-model="wallpaperData.wTitle" required>
          </div>
          <div class="form-group">
            <label for="w-create-time">Create Time</label>
            <input id="w-create-time" type="text" v-model="wallpaperData.wCreateTime" required>
          </div>
          <div class="form-group">
            <label for="w-cate">Category</label>
            <input id="w-cate" type="text" v-model="wallpaperData.wCate" required>
          </div>
          <!-- <div class="form-group">
            <label for="w-tags">Tags</label>
            <input id="w-tags" type="text" v-model="tagInput" @keydown.enter="addTag" required>
            <ul class="tag-list">
              <li v-for="(tag, index) in wallpaperData.wTags" :key="index">
                {{ tag.tagName }}
                <button class="remove-tag" @click="removeTag(index)">x</button>
              </li>
            </ul>
          </div> -->
          <div class="form-group">
            <label for="w-length">Length</label>
            <input id="w-length" type="number" v-model="wallpaperData.wLength" required>
          </div>
          <div class="form-group">
            <label for="w-width">Width</label>
            <input id="w-width" type="number" v-model="wallpaperData.wWidth" required>
          </div>
        </div>
        <button class="upload-button" @click="uploadImage">上传</button>
      </div>
    </div>

    <div class="ai-generation">
      <h2 class="section-title">AI生成壁纸</h2>
      <div class="search-input">
        <input type="text" v-model="aikeyword" placeholder="输入关键词">
        <button @click="searchWallpapers('ai')" class="search-button">生成壁纸</button>
      </div>
      <!-- 显示AI生成的壁纸结果 -->
      <!-- <div class="wallpaper-list">
        <div v-for="wallpaper in generatedWallpapers" :key="wallpaper.id" class="wallpaper-item">
          <img :src="wallpaper.url" :alt="wallpaper.id" class="wallpaper-image" @mouseover="showImageInfo(wallpaper)" @click="showImageDetails(wallpaper)">
          <div class="wallpaper-info">
            <p>AI生成</p> -->
            <!-- 显示其他图片信息 -->
          <!-- </div>
        </div> -->
      <!-- </div> -->
      <div class="wallpaper-list">
      <one-image v-for="wallpaper in generatedWallpapers" :key="wallpaper.id" :image="wallpaper" @image-selected="selectImage"></one-image>
    </div>

    <div v-if="showModal" class="modal-overlay">
      <!-- 弹窗内容 -->
      <div class="modal">
        <h3>{{ selectedWallpaper.name }}</h3>
        <img :src="selectedWallpaper.url" alt="壁纸">
        <!-- 壁纸的其他详细信息 -->
        <button @click="closeModal" class="close-button">关闭</button>
      </div>
    </div>
    
    </div>

    <div class="web-scraping">
    <h2 class="section-title">壁纸爬虫</h2>
    <div class="search-input">
      <input type="text" v-model="sckeyword" placeholder="输入关键词">
      <button @click="searchWallpapers('scraping')" class="search-button">搜索壁纸</button>
    </div>
    <!-- 显示爬虫搜索的壁纸结果 -->
    <div class="wallpaper-list">
      <one-image v-for="wallpaper in scrapedWallpapers" :key="wallpaper.id" :image="wallpaper" @image-selected="openModal(wallpaper)" @click="selectImage(wallpaper)"></one-image>
    </div>

    <!-- 弹窗遮罩层 -->
    <div v-if="showModal" class="modal-overlay">
      <!-- 弹窗内容 -->
      <div class="modal">
        <h3>{{ selectedWallpaper.name }}</h3>
        <img :src="selectedWallpaper.url" alt="壁纸">
        <!-- 壁纸的其他详细信息 -->
        <button @click="closeModal" class="close-button">关闭</button>
      </div>
    </div>
  </div>


    <!-- 图片信息弹窗 -->
    <div v-if="selectedImage" class="image-details">
      <div class="image-details-overlay"></div>
      <div class="image-details-content">
        <div class="image-details-header">
          <h3>图片详情</h3>
          <button @click="hideImageDetails" class="close-button">×</button>
        </div>
        <div class="image-details-body">
          <img :src="selectedImage.url" :alt="selectedImage.id" class="image-details-image">
          <!-- 显示其他图片信息 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from './Page/NavBar.vue';
import axios from 'axios';
import OneImage from './Page/OneImage.vue';
import Image from './Page/image.js';

export default {
  components: { NavBar,OneImage },
  data() {
    return {
      aikeyword: '',
      sckeyword: '',
      file: null,
      generatedWallpapers: [],
      scrapedWallpapers: [],
      selectedImage: null,
      showModal: false, // 弹窗显示状态
      selectedWallpaper: null, // 选中的壁纸对象
      // wallpaperData: {
      //   wallpaperId: '', 
      //   wUrl: '',
      //   wThumbnails: '',
      //   wTitle: '',
      //   wCreateTime: '2023-05-29T12:32:17.568Z',
      //   wCate: '',
      //   wTags: [
      //     { tagId: '1234', tagName: 'exampletagname' }
      //   ],
      //   userId: '5ef977b5-dd57-48b7-9d2b-f0e36437fd91',
      //   wLength: 0,
      //   wWidth: 0,
      //   wUpdater: null // 请提供一个有效的用户ID
      // },
      wallpaperData:{
        wallpaperId: 'bca07983-dad6-423e-97ab-471660028bd0',
        wUrl: 'https://pic0.sucaisucai.com/00/36/00436940_2.jpg',
        wThumbnails: 'https://pic0.sucaisucai.com/00/36/00436940_2.jpg',
        wTitle: '123',
        wCreateTime: '2023-05-31T20:07:52.4930925+08:00',
        wCate: 'else',
        wTags: [
          {
            tagId: '123475',
            tagName: 'exampletagname'
          }
        ],
        userId: '63bfdf6b-e1c3-47bc-80c1-770e27c22b3d',
        wUpdater: null,
        wLength: 0,
        wWidth: 0
      },
      tagInput: '',
      showForm: true,
    };
  },
  methods: {
    handleFileChange(event) {
      // 获取选择的文件
      const file = event.target.files[0];
      // 可以在这里进行一些文件验证操作，例如文件类型、大小等的校验
      // ...

      // 保存文件对象到组件的数据中
      this.file = file;
    },
    uploadImage() {
      if (this.file) {
        // 创建 FormData 对象
        const formData = new FormData();
        // 添加文件到 FormData 对象
        formData.append('image', this.file);

        // 在这里执行上传操作，可以使用 axios 或其他 HTTP 请求库发送请求到后端
        // ..
      }
    },
    searchWallpapers(source) {
      if (source === 'ai') {
        this.generatedWallpapers.splice(0);
        // 执行AI生成壁纸的搜索操作
        // ..
        // 示例数据
        // this.generatedWallpapers = [
        //   { id: 1, url: 'src/renderer/assets/test.png' },
        //   { id: 2, url: 'src/renderer/assets/test.png' },
        // ];
        var pachongresultURL1 = '';
        var pachongresultURL2 = '';
        var pachongresultURL3 = '';
        var pachongresultURL4 = '';
        var pachongresultURL5 = '';
        var pachongresultURL6 = '';
        var API_KEY = '37017620-39e17fe8dc345d83824af5f6a';
        var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(this.aikeyword);
        // 示例数据
        const result = [];
        axios.get(URL)
        .then(response => {
          //const images = response.data;
           console.log(response.data.hits[0].previewURL);
        //   images.forEach((imageData, index) => {
        //     const image = new Image(index + 1, imageData.wUrl, this.changetagtochina(imageData.wCate));
        //     if (imageData.userId === userId) {//根据id获取其上传过的壁纸
        //       result.push(image);
        //     }
        //   });
       pachongresultURL1 = response.data.hits[6];
       pachongresultURL2 = response.data.hits[7];
       pachongresultURL3 = response.data.hits[8];
       pachongresultURL4 = response.data.hits[9];
       pachongresultURL5 = response.data.hits[10];
       pachongresultURL6 = response.data.hits[11];
       console.log(pachongresultURL1);
       console.log(pachongresultURL2);
       const images = [pachongresultURL1,pachongresultURL2,pachongresultURL3,pachongresultURL4,pachongresultURL5,pachongresultURL6];
       images.forEach((imageData,index) => {
        const image = new Image(index+1,imageData.previewURL,this.aikeyword,false);
        this.generatedWallpapers.push(image);
       })
        // this.scrapedWallpapers = [
        //   { id: 1, url: pachongresultURL1 },
        //   { id: 2, url: pachongresultURL2 },
        // ];
         })
        .catch(error => {
          console.error(error);
        });
      } else if (source === 'scraping') {
        this.scrapedWallpapers.splice(0);
        // 执行壁纸爬虫的搜索操作
        // ..
        var pachongresultURL1 = '';
        var pachongresultURL2 = '';
        var pachongresultURL3 = '';
        var pachongresultURL4 = '';
        var pachongresultURL5 = '';
        var pachongresultURL6 = '';
        var API_KEY = '37017620-39e17fe8dc345d83824af5f6a';
        var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(this.sckeyword);
        // 示例数据
        const result = [];
      axios.get(URL)
        .then(response => {
          //const images = response.data;
           console.log(response.data.hits[0].previewURL);
        //   images.forEach((imageData, index) => {
        //     const image = new Image(index + 1, imageData.wUrl, this.changetagtochina(imageData.wCate));
        //     if (imageData.userId === userId) {//根据id获取其上传过的壁纸
        //       result.push(image);
        //     }
        //   });
       pachongresultURL1 = response.data.hits[0];
       pachongresultURL2 = response.data.hits[1];
       pachongresultURL3 = response.data.hits[2];
       pachongresultURL4 = response.data.hits[3];
       pachongresultURL5 = response.data.hits[4];
       pachongresultURL6 = response.data.hits[5];
       console.log(pachongresultURL1);
       console.log(pachongresultURL2);
       const images = [pachongresultURL1,pachongresultURL2,pachongresultURL3,pachongresultURL4,pachongresultURL5,pachongresultURL6];
       images.forEach((imageData,index) => {
        const image = new Image(index+1,imageData.previewURL,this.sckeyword,false);
        this.scrapedWallpapers.push(image);
       })
        // this.scrapedWallpapers = [
        //   { id: 1, url: pachongresultURL1 },
        //   { id: 2, url: pachongresultURL2 },
        // ];
         })
        .catch(error => {
          console.error(error);
        });
      // return result;
      }
    },
    // selectImage(image) {
    //   // 触发图片选择事件，传递选中的图片对象
    //   this.$emit('image-selected', image);
    // },
    showImageInfo(image) {
      // 显示图片信息
      console.log(image.id);
      // 可以在这里根据图片id获取其他相关信息，并展示给用户
    },
    showImageDetails(image) {
      // 显示图片详情弹窗
      this.selectedImage = image;
    },
    hideImageDetails() {
      // 隐藏图片详情弹窗
      this.selectedImage = null;
    },
    // addTag() {
    //   if (this.tagInput.trim() !== '') {
    //     this.wallpaperData.wTags.push({
    //       tagId: '',
    //       tagName: this.tagInput.trim()
    //     });
    //     this.tagInput = '';
    //   }
    // },
    // removeTag(index) {
    //   this.wallpaperData.wTags.splice(index, 1);
    // },
    uploadImage() {
      axios.post('https://localhost:7293/api/Wallpapers', this.wallpaperData)
        .then(response => {
          // 处理上传成功的逻辑
          console.log(this.wallpaperData)
        })
        .catch(error => {
          // 处理上传失败的逻辑
          console.log(this.wallpaperData)
          console.error(error)
        });
    },
    toggleForm() {
      this.showForm = !this.showForm;
    },
    selectImage(wallpaper) {
      // 选中壁纸，并显示弹窗
      console.log('弹窗这个函数执行了奥');
    
      this.selectedWallpaper = wallpaper;
      this.showModal = true;
      console.log(this.showModal);
      console.log(this.selectedWallpaper);
    },
    openModal(wallpaper) {
      this.selectedWallpaper = wallpaper;
      console.log('openModel执行了奥');
      this.showModal = true;
      console.log(this.selectedWallpaper);
      console.log(this.showModal)
    },
    closeModal() {
      this.showModal = false;
      this.selectedWallpaper = null;
    }
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.upload-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.image-upload {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.upload-form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

.tag-list {
  list-style: none;
  padding: 0;
  margin: 5px 0;
}

.tag-list li {
  display: inline-block;
  background-color: #f0f0f0;
  color: #555;
  padding: 5px 8px;
  margin-right: 5px;
  border-radius: 3px;
}

.remove-tag {
  background-color: transparent;
  border: none;
  color: #999;
  font-size: 12px;
  cursor: pointer;
}

.upload-button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

.ai-generation,
.web-scraping {
  margin-top: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.search-input {
  display: flex;
  margin-bottom: 20px;
}

.search-input input[type="text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

.search-button {
  margin-left: 10px;
  padding: 8px 15px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

.wallpaper-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.wallpaper-item {
  width: calc(33.33% - 20px);
  margin: 10px;
  position: relative;
}

.wallpaper-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  cursor: pointer;
}

.wallpaper-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.image-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.image-details-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.image-details-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 80%;
  overflow-y: auto;
}

.image-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.image-details-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.close-button {
  background-color: transparent;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
}

.image-details-body {
  text-align: center;
}

.image-details-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 5px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal {
  background-color: #fff;
  padding: 20px;
  width: 500px;
  text-align: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.modal h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.modal img {
  width: 80%;
  height: auto;
  margin-bottom: 10px;
  /* text-align: center; */
  /* justify-content: center; */
}


.close-button {
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  justify-content: center;
}

.close-button:hover {
  background-color: #23527c;
}
</style>
